<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程-社区-121邹圣洁</title>
    <link rel="stylesheet" href="download/font_ewrrrydj26/iconfont.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #dddddd;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #303030;
            display: inline-block;
            font-size: 20px;
        }
        #nav{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            z-index: 100;
            display: flex;
            background-color: #fff;
            box-shadow: 0px 0px 0px 3px rgb(247, 247, 247);
        }
        #nav li{
            width: 20%;
            text-align: center;
            font-family: "华文细黑";
            font-size: 14px;
        }
        .iconfont{
            font-size: 30px;
            letter-spacing: 20px;
        }
        .icon-xiaoxi,.icon-SX_015,.icon-wodejifen{
            font-size: 28px;
        }
        p{
            margin-right: 20px;
            font-size: 14px;
            font-weight: normal;
        }
        #nav a:hover,a:active{
            color: #3d85fb;
        }

        #head{
            width: 100%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            background-color: #fff;
            z-index: 101;
        }
        #head #ss{
            width: 30%;
            height: 50px;
            line-height: 50px;
        }
        .icon-sousuo{
            color: #242424;
            margin-left: 60px;
        }
        #right{
            width: 30%;
            display: flex;
            height: 50px;
            line-height: 50px;
        }
        .tx{
            margin-left: 25%;
        }
        .tx img{
            width: 30px;
            height: 30px;
            margin-top: 10px;
            border-radius: 50px;
        }
        .icon-liwuhuodong{
            margin-left: 20%;
            color: #242424;
        }
        #head ul{
            display: flex;
            width: 40%;
            height: 50px;
            margin: 0 auto;
        }
        #head ul li{
            width: 20%;
            height: 50px;
            line-height: 50px;
            margin-left: 10%;
            text-align: center;
            font-size: 22px;
            color: #242424;
            font-family: "黑体";
        }
        .quan{
            width: 27px;
            height: 27px;
            background: linear-gradient(to bottom right,#30a2ffee,#30a2ff9d,#30a2ff79,#30a2ff3f,#30a2ff25);
            border-radius: 50px;
            margin-top: -45px;
            margin-left: 25%;
        }
        
        #head ul li:hover,#head ul li:visited{
            font-size: 24px;
            color: black;
        }

        .gz div{
            width: 55%;
            margin: 0 auto;
        }
        .gz{
            width: 100%;
            margin: 0 auto;
            background-color: #fff;
        }
        .gz img{
            width: 100%;
            margin: 0 auto;
            margin-top: 70px;
            margin-bottom: 370px;
        }

        .gc{
            width: 100%;
            height: 50px;
            box-shadow: 0px 2px 0px 0px rgb(227, 227, 227);
            border-bottom: 1px solid #e0e0e0;
            background-color: #fff;
        }
        #header{
            width: 100%;
            z-index: 100;
            height: 50px;
            background-color: #fff;
        }
        #header ul{
            display: flex;
            width: 92%;
            height: 50px;
            margin: 0 auto;
        }
        #header li{
            width: 20%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            font-family: "黑体";
            color: #242424;
        }
        #rmht{
            width: 92%;
            background-color: #fff;
            margin: 0 auto;
            margin-top: 2%;
            border-radius: 20px;
            box-shadow: 2px 2px 2px 2px rgb(227, 227, 227);
        }
        .z{
            width: 100%;
            margin: 0 auto;
            display: flex;
            height: 50px;
        }
        .z p:nth-child(1){
            font-size: 1.75vw;
            line-height: 50px;
            font-family: "黑体";
            margin-top: 10px;
            margin-left: 2.6%;
            font-weight: bold;
            color: #191919;
            width: 50%;
            text-align: left;
        }
        .z p:nth-child(2){
            font-size: 1.2vw;
            font-family: "华文细黑";
            font-weight: bold;
            color: #191919;
            margin-top: 23px;
            width: 50%;
            text-align: right;
            margin-right: 1%;
        }
        .icon-guanbi{
            font-size: 1vw;
            color: #717171;
            
        }
        .myrmht{
            width: 96%;
        }
        .myrmht img{
            width: 100%;
        }
        #fx{
            display: flex;
            flex-wrap: wrap;
            width: 95%;
            margin: 0 auto;
        }
        #fx ul{
            width: 320px;
            margin-top: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 2px 2px 2px 2px rgb(227, 227, 227);
            margin-right: 15px;
            margin-left: 25px;
        }
        #fx ul li:nth-child(1) img{
            width: 320px;
            margin-top: 20px;
        }
        #fx ul li p{
            font-size: 14px;
            font-family: "华文细黑";
            margin-left: 20px;
            font-weight: bold;
            color: #242424;
            margin-top: 5px;
            
        }
        #fx ul li:nth-child(4) img{
            width: 300px;
            margin-top: 10px;
            margin-left: 10px;
        }
        .pl{
            display: flex;
            margin-top: 10px;
            position: relative;
        }
        .pl p:nth-child(1){
            width: 180px;
            height: 38px;
            background-color: rgba(40, 91, 146, 0.126);
            border-radius: 40px;
            margin-left: 15px;
            line-height: 40px;
        }
        .pl p:nth-child(1) img{
            width: 25px;
            height: 25px;
            border-radius: 50px;
            margin-top: 5px;
            margin-left: 6px;
        }
        .icon-good{
            font-size: 25px;
            margin-left: 30px;
            position: absolute;
            top: 10px;
            left: 180px;
        }
        .icon-jianyi{
            position: absolute;
            top: 10px;
            left: 260px;
        }
        #fx ul .pl .sz{
            font-size: 9px;
        }
        #fx ul .pl .q{
            position: absolute;
            top: 10px;
            left: 40px;
            color: #898989;
            font-size: 14px;
            font-weight: normal;
        }
        .o{
            position: absolute;
            left: 214px;
            top: 2px;
        }
        .t{
            position: absolute;
            left: 267px;
            top: 2px;
        }
        #fx ul .h{
            width: 300px;
            background-color: rgba(46, 106, 169, 0.134);
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
        }
        #fx ul .h .hui{
            color: #444444;
            font-weight: normal;
            margin-left: -17px;
        }
        #fx ul li:nth-child(3) .hui{
            color: #444444;
            font-weight: normal;
        }
        .jzz{
            width: 120px;
            display: flex;
            height: 150px;
            margin-top: 50px;
            margin: 0 auto;
            text-align: center;
        }
        .jzz p{
            color: rgb(108, 108, 108);
            font-size: 13px;
            margin-top: 40px;
        }
        .icon-a-jiazaizhongdaxiao{
            color: #008aff;
            margin-top: 35px;
        }

        .xz{
            width: 100%;
            background-color: #fff;
        }
        .center{
            width: 70%;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
        }
        .left{
            margin-left: 60px;
        }
        .xz .left ul{
            width: 460px;
            height: 80px;
            display: flex;
            margin-top: 20px;
            position: relative;
        }
        .xz .left ul img{
            width: 80px;
            height: 80px;
        }
        .xz .left ul li:nth-child(2){
            margin-left: 20px;
        }
        .xz .left ul li:nth-child(2) p:nth-child(1){
            font-size: 18px;
            margin-top: 10px;
            font-family: "华文细黑";
            font-weight: bold;
        }
        .xz .left ul li:nth-child(2) .hui{
            font-size: 13px;
            color: #717171;
            font-family: "华文细黑";
            margin-top: 10px;
        }
        .xz .left ul li:nth-child(2) .hui .hei{
            color: #000000;
        }
        .icon-tiaozhuan{
            font-size: 20px;
            position: absolute;
            top: 30px;
            right: 0px;
        }
        .none{
            display: none;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li>
            <a href="index.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="sheqv.html">
                <span class="iconfont icon-shequ"></span>
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="xiaoxi.html">
                <span class="iconfont icon-xiaoxi"></span>
                <p>消息</p>
            </a>
        </li>
        <li>
            <a href="xingcheng.html">
                <span class="iconfont icon-SX_015"></span>
                <p>行程</p>
            </a>
        </li>
        <li>
            <a href="wode.html">
                <span class="iconfont icon-wodejifen"></span>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <div id="main">
    <div id="head">
        <div id="ss"><a href="sousuo.html"><span class="iconfont icon-sousuo"></span></a></div>
        <ul id="dh">
            <li class="li">关注<div class="quan"></div></li>
            <li class="li">广场<div class="quan"></div></li>
            <li class="li">小组<div class="quan"></div></li>
        </ul>
        <div id="right">
            <span class="iconfont icon-liwuhuodong"></span>
            <div class="tx"><img src="img/tx.jpg"></div>
        </div>
    </div>
    <div class="box">
    <div class="gz">
        <div>
            <img src="img/gz.png">
        </div>
    </div>
</div>
    <div class="box none">
    <div class="gc">
        <div id="header">
            <ul>
                <li>发现</li>
                <li>大连</li>
                <li>福利</li>
                <li>热门</li>
                <li>影视</li>
                <li>潮玩</li>
            </ul>
        </div>
        <div id="rmht">
            <div class="z">
                <p>热门话题</p>
                <p>话题广场<span class="iconfont icon-guanbi"></span></p>
            </div>
            <div class="swiper myrmht">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="img/rmht1.jpg"></div>
                  <div class="swiper-slide"><img src="img/rmht2.jpg"></div>
                  <div class="swiper-slide"><img src="img/rmht3.jpg"></div>
                  <div class="swiper-slide"><img src="img/rmht4.jpg"></div>
                </div>
                <div class="swiper-pagination"></div>
              </div>
        </div>
        <div id="fx">
            <ul>
                <li><img src="img/fx1.png"></li>
                <li><p>高考结束了！来重庆一定要吃的几款宝藏小吃！</p></li>
                <li><p class="hui">马上就暑假了，来重庆玩的小伙伴，一定不要错过这几款好吃又实惠的美食！本地人都n刷~…</p></li>
                <li><img src="img/fx1-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">1710</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">199</p>
                </li>
                <li class="h">
                    <p>Blinkkk:<p class="hui">什么时候人少？</p></p>
                    <p>Rona091126:<p class="hui">想吃</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx2.jpg"></li>
                <li><p>我又来了老门东了！南京的糖水真的没有瓶颈期</p></li>
                <li>
                    <p class="hui">南京的糖水，怕是真的没有瓶颈期</p>
                    <p class="hui">蜜桃鲜奶茶！一整个粉嘟嘟，全是手工做的，在老门东的巷子里，椰奶冻，胖嘟嘟的小丸子</p>
                </li>
                <li><img src="img/fx2-1.jpg"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">2713</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">213</p>
                </li>
                <li class="h">
                    <p>美食体验者:<p class="hui">看着好有食欲啊</p></p>
                    <p>花牛旅行者:<p class="hui">想吃</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx3.png"></li>
                <li><p>《谁懂！！！多少次去佛山都为了这口…》</p></li>
                <li>
                    <p class="hui">#2022携程美食林榜单发布</p>
                    <p class="hui">推荐来佛山一定要来金榜街！！！真的一条街都是牛乳香…</p>
                </li>
                <li><img src="img/fx3-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">235</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">18</p>
                </li>
                <li class="h">
                    <p>小龙带你探索城市:<p class="hui">咽下了口水</p></p>
                    <p>M27****699:<p class="hui">最推荐哪道菜？</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx4.png"></li>
                <li><p>公园四季|重庆鹅岭公园，人约黄昏后的雅典浪漫</p></li>
                <li>
                    <p class="hui">黄昏时分的 鹅岭公园 已褪去了网红的喧嚣</p>
                    <p class="hui">沉静雅致又迷人</p>
                    <p>…</p>
                </li>
                <li><img src="img/fx4-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">5691</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">230</p>
                </li>
                <li class="h">
                    <p>蜡笔少女:<p class="hui">您好，看了您拍摄的作…</p></p>
                    <p>玉路仝行:<p class="hui">11年携程老用户血泪敬…</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx5.png"></li>
                <li><p>去厦门吃10000000次</p></li>
                <li>
                    <p class="hui">爱上厦门的第101天</p>
                    <p class="hui">真的很喜欢来厦门</p>
                    <p class="hui">好吃的实在太多了…</p>
                </li>
                <li><img src="img/fx5-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">7933</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">293</p>
                </li>
                <li class="h">
                    <p>梅子美食:<p class="hui">要排队吗？</p></p>
                    <p>大鱼吃小鱼:<p class="hui">什么时候人少？</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx6.png"></li>
                <li><p>福州这个砂锅真的很好吃，我吃了几次一点都不腻</p></li>
                <li>
                    <p class="hui">藏在学生街一个巷子里 时分容易错过</p>
                    <p class="hui">被网友种草过去吃的 才发现我以前竟然来过和大学舍友经常吃 在后院吃的 没去过正门…</p>
                </li>
                <li><img src="img/fx6-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">121</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">20</p>
                </li>
                <li class="h">
                    <p>逗比狠友爱:<p class="hui">什么时候人少？</p></p>
                    <p>Joanna娜乔安:<p class="hui">什么时候人少？</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx7.png"></li>
                <li></li>
                <li><p class="hui">在苏州就有这一座建筑，这座房子的外形看上去就像是金字塔一样，但是也有人觉得这里像现实中的纪念碑谷，这里就是游站未来城，景如其名，整个名就很有科幻的感觉，建筑的…</p></li>
                <li><img src="img/fx7-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">1211</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">54</p>
                </li>
                <li class="h">
                    <p>M44****9822:<p class="hui">只要你敢蹦，就能…</p></p>
                    <p>M50****1584:<p class="hui">看到我家了！</p></p>
                </li>
            </ul>
            <ul>
                <li><img src="img/fx8.png"></li>
                <li><p>第一次去中国雪乡必看 雪乡3天这么玩</p></li>
                <li>
                    <p class="hui">#玩雪行为大赏</p>
                    <p class="hui">中国雪乡被誉为“冬天里的童话世界”。</p>
                    <p class="hui">…</p>
                </li>
                <li><img src="img/fx8-1.png"></li>
                <li class="pl">
                    <p><img src="img/tx.jpg"><p class="q">发表评论</p></p>
                    <span class="iconfont icon-good"></span>
                    <p class="sz o">318</p>
                    <span class="iconfont icon-jianyi"></span>
                    <p class="sz t">38</p>
                </li>
                <li class="h">
                    <p>近处烟火:<p class="hui">哇哦~好美！</p></p>
                    <p>长建的清途:<p class="hui">附近交通方便吗</p></p>
                </li>
            </ul>
        </div>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
</div>
<div class="box none">
    <div class="xz">
        <div class="center">
            <div class="left">
                <ul>
                    <li><img src="img/xz-1.png"></li>
                    <li>
                        <p>遛娃大部队</p>
                        <p class="hui"><span class="hei">5333</span>条帖子 | <span class="hei">4092</span>位宝爸妈正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-2.png"></li>
                    <li>
                        <p>城市美食拉踩小组</p>
                        <p class="hui"><span class="hei">20014</span>条帖子 | <span class="hei">3028</span>位吃货正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-3.png"></li>
                    <li>
                        <p>就喜欢逛公园</p>
                        <p class="hui"><span class="hei">3679</span>条帖子 | <span class="hei">2474</span>位公园艺术家正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-4.png"></li>
                    <li>
                        <p>拍照爱好者</p>
                        <p class="hui"><span class="hei">8332</span>条帖子 | <span class="hei">4064</span>位大师正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-5.png"></li>
                    <li>
                        <p>我们都爱山水风景</p>
                        <p class="hui"><span class="hei">10405</span>条帖子 | <span class="hei">2490</span>位资深玩家正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-6.png"></li>
                    <li>
                        <p>我们都爱自驾游</p>
                        <p class="hui"><span class="hei">4292</span>条帖子 | <span class="hei">3273</span>位老司机正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-7.png"></li>
                    <li>
                        <p>我们都在江浙泸</p>
                        <p class="hui"><span class="hei">1133</span>条帖子 | <span class="hei">1687</span>位包邮区群众正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
            </div>
            <div class="left">
                <ul>
                    <li><img src="img/xz-8.png"></li>
                    <li>
                        <p>一起去旅行</p>
                        <p class="hui"><span class="hei">10372</span>条帖子 | <span class="hei">3814</span>位大可爱正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-9.png"></li>
                    <li>
                        <p>有问必答万事屋</p>
                        <p class="hui"><span class="hei">607</span>条帖子 | <span class="hei">4187</span>位解惑大师正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-10.png"></li>
                    <li>
                        <p>城市玩乐探索家</p>
                        <p class="hui"><span class="hei">2858</span>条帖子 | <span class="hei">1873</span>位看客正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-11.png"></li>
                    <li>
                        <p>民间露营大玩家</p>
                        <p class="hui"><span class="hei">1226</span>条帖子 | <span class="hei">554</span>位露营玩家正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-12.png"></li>
                    <li>
                        <p>上海小组</p>
                        <p class="hui"><span class="hei">1037</span>条帖子 | <span class="hei">1446</span>位小笼包正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-13.png"></li>
                    <li>
                        <p>北京小组</p>
                        <p class="hui"><span class="hei">1328</span>条帖子 | <span class="hei">1548</span>位炸酱面正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
                <ul>
                    <li><img src="img/xz-14.png"></li>
                    <li>
                        <p>重庆小组</p>
                        <p class="hui"><span class="hei">424</span>条帖子 | <span class="hei">1329</span>位重庆小面正在讨论</p>
                    </li>
                    <li>
                        <span class="iconfont icon-tiaozhuan"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="jzz">
            <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
            <p>加载中</p>
        </div>
    </div>
</div>
</div>

    <script src="swiper/swiper-bundle.min.js"></script>
      <script>
        var swiper = new Swiper(".myrmht", {
          pagination: {
            el: ".swiper-pagination",
          },
          autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        });

        window.onscroll = function(){
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            if(st>head.offsetHeight){
                head.style.position = "fixed";
            }
            else{
                head.style.position = "static";
            }
        }

        var tab = document.getElementById("main");
		var tt = main.getElementsByClassName("dh")[0];
		var li = dh.getElementsByTagName("li");
		var tc = main.querySelectorAll(".box");
		for (i = 0; i < li.length; i++) {
			li[i].onmouseover = function () {
				for (j = 0; j < tc.length; j++) {
					tc[j].style.display = "none";
					li[j].index = j;
					li[j].className = "";
				}
				tc[this.index].style.display = "block";
				// this.className = "quan";
				//红色的三角箭头通过css样式实现，注意.selected .pic的CSS优先级一定要高
			}
		}
        
      </script>
</body>
</html>